<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <style>
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #eee;
        }

        .form-signin {
            max-width: 330px;
            padding: 15px;
            margin: 0 auto;
        }

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }

        .form-signin .checkbox {
            font-weight: normal;
        }

        .form-signin .form-control {
            position: relative;
            height: auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>
</head>
<body>
<div class="container">

    <form class="form-signin" method="post">
        <h2 class="form-signin-heading">记账系统登录页</h2>
        <label for="username" class="sr-only">用户名</label>
        <input type="text" name="username" id="username" class="form-control"  placeholder="用户名" required
               autofocus>
        <br>
        <label for="password" class="sr-only">密码</label>
        <input type="password" name="password" id="password" class="form-control"  placeholder="密码"
               required>
        <!--<div class="checkbox">-->
        <!--<label>-->
        <!--<input type="checkbox" name="rememberMe" value="remember-me"> Remember me*/}}-->
        <!--</label>-->
        <!--</div>-->
        <button class="btn btn-lg btn-primary btn-block" id="submitBtn" type="button">登录</button>
    </form>
</div> <!-- /container -->
</body>
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
<script>
    $("#submitBtn").on("click", function (event) {
        let username = $("#username").val();
        if (!username) {
            alert("用户名不能为空");
            return;
        }

        let password = $("#password").val();
        if (!password) {
            alert("密码不能为空");
            return;
        }

        $.ajax({
            url: "/login",
            method: "POST",
            dataType: "json",
            data: {
                "username": username,
                "password": password
            },
            success: function (res) {
                if (res && res.code === 200) {
                    window.location.href = "/"
                } else {
                    alert("登录失败, 失败消息:" + res.message)
                }
            },
            error: function (res) {
                alert("发送请求失败")
            }
        })

    })
</script>
</html>